<template>
	<view>
		<view class="head content">
			<view class="top-row">
				<view class="left">
					<image src="/static/icon/phone1.jpg" mode="aspectFill"></image>
					<view>
						<view class="name">{{ info.name || '' }}</view>
						<view @click="toBack">重新选择机型维修</view>
					</view>
				</view>
			</view>
		</view>

		<uni-collapse show-arrow show-animation v-model="collapse">
			<uni-collapse-item title="基础信息">
				<view class="remark">
					<view class="row">
						<view>姓名:</view>
						<input type="text" v-model="formData.name" maxlength="20" placeholder="请输入您的姓名" />
					</view>
					<view class="row">
						<view>电话:</view>
						<input type="text" v-model="formData.mobile" maxlength="11" placeholder="请输入联系电话" />
					</view>
					<view class="row">
						<view>地址:</view>
						<input type="text" v-model="formData.address" maxlength="60" placeholder="请输入详细地址信息" />
					</view>
					<view class="row">
						<view>IMEL:</view>
						<input type="text" v-model="formData.imel" maxlength="50" placeholder="IMEI/*#06#或通用->关于本机[必埴]" />
					</view>

					<!-- <view class="row">
							<view >推荐人:</view>
							<input type="text" v-model="formData.desc" placeholder="可放空不埴写" />
						</view> -->
				</view>
			</uni-collapse-item>

			<uni-collapse-item title="维修内容">
				<view class="info">
					<textarea type="text" rows="3" class="text" v-model="formData.desc" placeholder="请输入手机问题描述" />
					<uni-file-picker
						v-model="fileList"
						:auto-upload="false"
						limit="9"
						title="最多选择9张图片"
						:list-styles="{
							borderStyle: { radius: '9px' }
						}"
						@select="selectFile"
						@progress="progress"
						@success="uploadSuccess"
						@fail="uploadFail"
					></uni-file-picker>
				</view>
			</uni-collapse-item>
		</uni-collapse>

		<view class="footer">
			<view class="btn" @click="submit">立即下单</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			collapse: ['0', '1', '2', '3'],
			payType: '1',
			info: {
				name: '',
				list: []
			},
			address: {
				address: '',
				id: '',
				mobile: '',
				name: ''
			},
			formData: {
				address: '',
				name: '',
				mobile: '',
				imel: '',
				desc: ''
				// address: '北京市东城区顺城大街118号12-304',
				// name: '刘大明',
				// mobile: '18856789990',
				// imel: 'IMEL1231#23123',
				// desc: '不知道哪里坏了 需要维修！！！！'
			},
			agreementStatus: '',
			customerService: {
				image: '',
				mobile: ''
			},

			// --
			fileList: []
		};
	},
	onLoad: function (option) {
		this.getGoodsInfo(option.id);
	},
	onShow: function () {},
	methods: {
		selectFile(e) {
			console.log('select', this.fileList);
			this.fileList = e.tempFiles;
		},
		progress(e) {
			console.log('progress', e);
		},
		uploadSuccess(e) {
			console.log('success', e);
			this.fileList.push(e.tempFiles);
		},
		uploadFail(e) {
			console.log('fail', e);
		},
		async startUpload() {
			uni.showLoading({
				title: '图片上传中...',
				mask: true
			});
			const uploadPromises = this.fileList.map((file) => {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$unishow + '/base/upload', // 替换为你的上传API地址
						filePath: file.path,
						name: 'file',
						formData: {}, // 可加入表单内其他参数
						success: (res) => {
							console.log('res', res);
							if (res.statusCode === 200) {
								const data = JSON.parse(res.data);
								console.log('success', data);
								resolve(data.data.fullurl); // 上传成功，解决Promise
							} else {
								reject(new Error('Upload failed')); // 上传失败，拒绝Promise
							}
						},
						fail: (e) => {
							console.log('error', e);
							reject(new Error('Upload failed')); // 上传失败，拒绝Promise
						}
					});
				});
			});

			try {
				// 等待所有上传操作完成
				const results = await Promise.all(uploadPromises);
				uni.hideLoading();
				// 所有上传成功
				return results;
			} catch (error) {
				// 处理上传过程中的任何错误
				this.tips('图片上传失败！');
			}
		},
		// 返回
		toBack() {
			uni.navigateBack();
		},
		// 获取信息
		async getGoodsInfo(id) {
			const data = await this.$api.request('/Backorder/getbackgoodbyid', 'POST', {
				id
			});
			this.info = data;
		},

		// 提交
		async submit(id) {
			if (!this.check()) return;
			const images = await this.startUpload();
			const data = await this.$api.request('/service/submits', 'POST', {
				...this.formData,
				backgood_id: this.info.id,
				images: images.join(',')
			});
			if (!data) return this.tips('提交失败！');

			this.payOrder(data.id);
			// this.toBack();
		},

		// 支付订单
		async payOrder(id) {
			const data = await this.$api.request('/service/wxpay', 'POST', {
				id
			});
			console.log(data);
			uni.requestPayment({
				provider: 'wxpay',
				...data,
				success: (res) => {
					this.tips('订单支付成功！');
					this.toBack();
				},
				fail: (err) => {
					console.log('支付取消或者失败:', err);
					this.tips('订单支付失败！');
				}
			});
		},

		// 校验
		check() {
			if (!this.formData.name) {
				this.tips('请输入您的姓名！');
				return false;
			}
			if (!this.formData.mobile) {
				this.tips('请输入联系电话！');
				return false;
			}
			if (!this.formData.address) {
				this.tips('请输入详细地址信息！');
				return false;
			}
			if (!this.formData.imel) {
				this.tips('请输入本机IMEL！');
				return false;
			}
			if (!this.formData.desc) {
				this.tips('请输入手机问题描述！');
				return false;
			}
			return true;
		},

		// 提示
		tips(text) {
			uni.showToast({
				title: text,
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.info {
	padding: 0 30rpx 30rpx;

	.text {
		background-color: #f5f5f5;
		padding: 20rpx;
		border-radius: 10rpx;
		min-height: 300rpx;
		width: 100%;
		margin-bottom: 30rpx;
	}
}

.content {
	background-color: #fff;
	border-radius: 18rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
}

.footer {
	background-color: #fff;
	position: fixed;
	width: 100%;
	bottom: var(--window-bottom);
	left: 0;
	padding: 20rpx 0;

	.btn {
		margin: auto;
		width: 300rpx;
		background-color: $main-color;
		text-align: center;
		color: #fff;
		border-radius: 99rpx;
		font-weight: 600;
		padding: 18rpx 0;
	}
}

.remark {
	padding-bottom: 20rpx;

	.row {
		display: grid;
		grid-template-columns: 120rpx 1fr;
		padding: 10rpx 30rpx;
		font-size: 30rpx;

		input {
			font-size: 30rpx;
		}
	}
}

::v-deep .uni-collapse {
	background-color: transparent;

	.uni-collapse-item {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 18rpx;
		overflow: hidden;

		.uni-collapse-item__title {
			border: none;

			.uni-collapse-item__title-text {
				font-size: 32rpx;
				font-weight: 600;

				&::before {
					width: 15rpx;
					background-color: $main-color;
					color: $main-color;
					margin-right: 15rpx;
					content: '.';
					height: 20rpx;
					border-radius: 99rpx;
				}
			}
		}
	}
}

.head {
	.top-row {
		display: grid;
		grid-template-columns: 1fr 140rpx;
		column-gap: 20rpx;

		.left {
			display: grid;
			grid-template-columns: 80rpx 1fr;
			column-gap: 12rpx;
			font-size: 28rpx;
			color: #666;

			.name {
				font-size: 40rpx;
				color: #333;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			image {
				width: 80rpx;
				height: 125rpx;
			}
		}

		.right {
			font-size: 30rpx;
			text-align: right;

			.problem {
				display: flex;
				align-items: center;

				&::after {
					content: '?';
					background-color: $main-color;
					color: #fff;
					width: 32rpx;
					height: 32rpx;
					text-align: center;
					line-height: 36rpx;
					border-radius: 99rpx;
					display: inline-block;
					margin-left: 8rpx;
				}
			}

			text {
				font-size: 50rpx;
				color: $main-color;
				margin-top: 10rpx;
			}
		}
	}
}

::v-deep .uni-collapse-item__wrap-content.uni-collapse-item--border {
	border-bottom-color: #fff;
}
</style>

<style>
page {
	background-color: #f5f5f5;
	padding: 20rpx;
}
</style>
